<template>
	<view class="classifyListLayOut">
		<template v-for="(item,ind) of classifyListData" :key="item.id">
			<!-- <image class="imgItem" :src="item.smallPicurl" lazy-load mode="aspectFill" @click="goPreview(item._id)"> -->
			<image class="imgItem" :src="item.smallPicurl" lazy-load mode="aspectFill" @click="goPreview(ind)">
			</image>
		</template>
	</view>
	<uni-load-more class="loadMoreHeight" :status="bottomLoadMoreStatus"></uni-load-more>
	<view class="bottomSafeArea"></view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'

	import {
		getClassifyListDataApi
	} from '@/Api/classifyList.js'

	//定义列表数据classifyListData
	const classifyListData = ref([])

	//定义底部加载框状态
	const bottomLoadMoreStatus = ref('loading')

	//定义当前显示页数
	let pageNum = 1

	//定义上次加载数据是否有数据被获取
	let isHaveData = true

	//获取id
	const id = ref("")

	//获取列表类名
	const name = ref("")

	//获取列表数据classifyListData
	async function getClassifyListData() {
		const res = await getClassifyListDataApi(id.value, pageNum)

		// console.log(res.data);

		classifyListData.value = res.data

		bottomLoadMoreStatus.value = 'more'

		//设置缓存
		uni.setStorageSync('ClassifyListData', classifyListData.value)
	}

	//数据获取完毕时执行
	onLoad((e) => {
		id.value = e.id
		name.value = e.name

		uni.setNavigationBarTitle({
			title: name.value
		})

		getClassifyListData()
	})

	//触底追加数据
	onReachBottom(async () => {

		bottomLoadMoreStatus.value = 'loading'

		if (isHaveData) {
			const res = await getClassifyListDataApi(id.value, ++pageNum)
			if (res.data.length === 0) {
				isHaveData = false
				bottomLoadMoreStatus.value = 'no-more'
				return
			}
			classifyListData.value = classifyListData.value.concat(res.data)

			bottomLoadMoreStatus.value = 'more'
			//设置缓存
			uni.setStorageSync('ClassifyListData', classifyListData.value)
		} else {
			return
		}

	})

	//定义页面跳转事件

	function goPreview(index) {
		uni.navigateTo({
			url: '/pages/preView/preView?page=' + index,
		})
	}

	// function goPreview() {
	// 	uni.navigateTo({
	// 		url: '/pages/preView/preView',
	// 	})
	// }
</script>

<style lang="scss" scoped>
	.classifyListLayOut {
		width: 750rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 5rpx;
		padding: 0 5rpx;

		.imgItem {
			width: 245rpx;
			height: 545rpx;
		}
	}

	.loadMoreHeight {
		height: 200px;
	}
</style>